<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_CSS选择器</title>
</head>
<style>
    /*1.标签名选择器：选中页面中此标签名的所有元素*/
    h4 {
        color: green;
    }
    /*2.id选择器：选中指定ID 的唯一一个元素*/
    #d1 {
        width: 100px;
        height: 100px;
        background-color: #70ff58;
    }
    .error {
        background-color: red;
    }
    .msg {
        color: white;
    }
    .ok {
        background-color: #70ff58;
    }
    a:link {
        color: #70ff58;
    }
    a:visited {
        color: gray;
    }

    a:hover {
        color: blue;
    }
    h4,#d1,.error {
        border: 5px solid black;
    }
    #d2 span {
        background-color: deeppink;
    }
    #d2>div>p>span {
        color: white;
    }
</style>
<body>
    <div>我是div</div>
    <div id="d1">我是div</div>
    <p>我是段落</p>
    <h4>我是标题</h4>    <h4 class="msg">我是标题</h4>
    <span class="error msg">用户名被占用</span>
    <span class="error msg">两次输入密码不一致</span>
    <span class="ok msg">正确的手机号格式</span>
    <span class="ok msg">正确的邮箱格式</span>
    <a href="#">link1</a>
    <a href="#1">link2</a>
    <a href="#2">link3</a>
    <hr>
    <div id="d2">
        <div>
            <span>测试文字</span>
            <p>这是段落测试文字</p>
            <p>这是<span>段落测试</span>文字</p>
        </div>
    </div>
</body>
</html>